<!DOCTYPE html>
<html lang="zh-CN">
	<head>
		<meta charset="UTF-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0" />
		<title>泉州美食地图 - 泉州文化地图</title>

		<!-- 字体 -->
		<link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;600&display=swap" rel="stylesheet">

		<!-- 样式 -->
		<link rel="stylesheet" href="css/main.css">
		<link rel="stylesheet" href="css/index.css">
		<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
		<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
		<script src="http://api.map.baidu.com/api?v=3.0&ak=sb7KQxowjqngFbax6jgaaGM6RnBk6dYa"></script>
	</head>
	<body>

		<!-- 容器包裹整个页面内容 -->
		<div class="page-wrapper">

			<!-- 顶部信息栏 -->
			<div class="top-bar">
				<div class="container">
					<span><i class="fas fa-phone"></i> 旅游咨询：1234-567890</span>
					<span><i class="fas fa-clock"></i> 开放时间：08:00 - 18:00</span>
					<div class="language-switcher">
						<a href="#" class="active">中文</a>
						<a href="#">English</a>
					</div>
				</div>
			</div>

			<!-- 导航栏 -->
			<header class="navbar">
			    <div id="navigationBar">
			        <div class="logo">
			            <img src="images/logo.jpg" alt="泉州文化地图">
			            <h1>智游泉州</h1>
			        </div>
			        <nav class="main-nav">
			            <ul class="nav-menu">
			                <li class="nav-item"><a href="index.html">首页</a></li>
			                <li class="nav-item"><a href="heritage-list.html">世遗景点</a></li>
			                <li class="nav-item active dropdown">
			                  <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-expanded="false">
			                    特色体验
			                  </a>
			                  <div class="dropdown-menu">
			                	<a class="dropdown-item" href="intangible-culture.html">非遗传承</a>
			                	<a class="dropdown-item" href="food-map.html">美食打卡</a>
			                </li>
			                <li class="nav-item"><a href="historical-research.html">历史研学</a></li>
			                <li class="nav-item"><a href="study-materials.html">学习资源</a></li>
			                <li class="nav-item"><a href="ai-itinerary.html">AI行程规划</a></li>
			                <li class="nav-item user-actions">
			                    <a href="user-center.html" class="user-icon"><i class="fas fa-user-circle"></i></a>
			                </li>
			            </ul>
			        </nav>
			        <button class="menu-toggle" aria-label="切换导航菜单">
			            <i class="fas fa-bars"></i>
			        </button>
			    </div>
			</header>

			<!-- 主体内容 -->
			<main class="main-content container">

				<!-- 页面标题 -->
				<h2 class="section-title">泉州美食地图</h2>

				<!-- 简介 -->
				<section class="intro-section">
					<p class="lead">
						泉州是闽南饮食文化的发源地之一，拥有丰富多样的传统小吃。从地道的面线糊到香喷喷的润饼，再到鲜美的石狮牛肉羹，每一口都让人回味无穷。
					</p>
				</section>

				<!-- 地图展示 -->
				<section class="map-section">
					<h3 class="section-subtitle">泉州美食点位分布图</h3>
					<div id="food-map" style="height: 400px; border-radius: 8px; overflow: hidden;"></div>
				</section>
				<script>
					var map;
					var markers = [];

					function initMap() {
						map = new BMap.Map("food-map");
						var centerPoint = new BMap.Point(118.6, 24.9); // 泉州的大致中心点，可以替换为更精确的值
						map.centerAndZoom(centerPoint, 13); // 设置中心点坐标和地图缩放级别

						// 添加美食点位标记
						addFoodMarker(new BMap.Point(118.610603, 24.913758), "宋小谨·泉州菜(南益广场店)");
						addFoodMarker(new BMap.Point(118.589674, 24.903548), "鱼田会(田安店)");
						// ... 添加更多美食点位

						// 启用滚轮缩放
						map.enableScrollWheelZoom(true);
					}

					function addFoodMarker(point, title) {
						var marker = new BMap.Marker(point);
						map.addOverlay(marker);
						var infoWindow = new BMap.InfoWindow(title);
						marker.addEventListener("click", function() {
							this.openInfoWindow(infoWindow);
						});
						markers.push(marker); // 将标记添加到数组中，以便后续管理（如清除）
					}

					// 初始化地图
					window.onload = initMap;
				</script>
				<!-- 分类筛选 -->
				<section class="filter-section">
					<h3 class="section-subtitle">筛选美食类型</h3>
					<div class="filters">
						<select id="typeFilter">
							<option value="">全部类型</option>
							<option value="小吃">小吃</option>
							<option value="甜品">甜品</option>
							<option value="海鲜">海鲜</option>
							<option value="茶馆">茶馆</option>
						</select>
					</div>
				</section>

				<!-- 美食推荐卡片 -->
				<section class="food-card-section">
					<h3 class="section-subtitle">泉州必吃美食推荐</h3>
					<div class="card-grid food-cards" id="foodCards">
						<div class="card" data-type="小吃">
							<img src="images/mianxianhu.jpeg" alt="面线糊">
							<div class="card-content">
								<h3>面线糊</h3>
								<p>泉州街头经典早餐，汤头浓郁，配料丰富。</p>
								<div class="card-footer">
									<span>推荐店铺：开元寺旁老店</span>
									<span>人均：¥10</span>
								</div>
							</div>
						</div>

						<div class="card" data-type="小吃">
							<img src="images/runbing.jpg" alt="润饼">
							<div class="card-content">
								<h3>润饼</h3>
								<p>闽南传统春卷，皮薄馅足，咸甜皆宜。</p>
								<div class="card-footer">
									<span>推荐店铺：中山路老字号</span>
									<span>人均：¥15</span>
								</div>
							</div>
						</div>

						<div class="card" data-type="甜品">
							<img src="images/tangyuan.jpeg" alt="汤圆">
							<div class="card-content">
								<h3>花生汤圆</h3>
								<p>软糯汤圆搭配花生酱，甜而不腻。</p>
								<div class="card-footer">
									<span>推荐店铺：钟楼夜市</span>
									<span>人均：¥12</span>
								</div>
							</div>
						</div>

						<div class="card" data-type="海鲜">
							<img src="images/pinpan.jpeg" alt="海鲜拼盘">
							<div class="card-content">
								<h3>石狮海鲜拼盘</h3>
								<p>新鲜海味，现捞现做，口感极佳。</p>
								<div class="card-footer">
									<span>推荐店铺：石狮码头餐厅</span>
									<span>人均：¥80</span>
								</div>
							</div>
						</div>

						<div class="card" data-type="茶馆">
							<img src="images/kung-fu-tea.jpg" alt="功夫茶">
							<div class="card-content">
								<h3>安溪铁观音功夫茶</h3>
								<p>正宗闽南功夫茶体验，适合慢节奏午后。</p>
								<div class="card-footer">
									<span>推荐店铺：清源山茶舍</span>
									<span>人均：¥35</span>
								</div>
							</div>
						</div>
					</div>
				</section>

				<!-- 视频推荐 -->
				<section class="video-section">
					<h3 class="section-subtitle">泉州美食纪录片片段</h3>
					<div class="video-wrapper">
						<iframe width="100%" height="400" src="//player.bilibili.com/player.html?isOutside=true&aid=547358443&bvid=BV1Pq4y1M7U4&cid=389524274&p=1"
							title="泉州美食之旅" frameborder="0" allowfullscreen></iframe>
					</div>
				</section>

			</main>

			<!-- 回到顶部按钮 -->
			<a href="#top" class="back-to-top" aria-label="回到顶部">
				<i class="fas fa-arrow-up"></i>
			</a>

			<!-- 页脚 -->
			<footer class="site-footer">
				<div class="container">
					<div class="footer-grid">
						<div class="footer-section">
							<h3>关于本站</h3>
							<p>"智游泉州"文旅平台致力于打造一站式泉州文化旅游服务平台，整合泉州优质旅游资源，为游客提供智能化、个性化的旅行体验。</p>
						</div>
						<div class="footer-section">
							<h3>快速链接</h3>
							<ul class="footer-links">
								<li><a href="#">常见问题</a></li>
								<li><a href="#">联系我们</a></li>
								<li><a href="#">隐私政策</a></li>
								<li><a href="#">使用条款</a></li>
							</ul>
						</div>
						<div class="footer-section">
							<h3>关注我们</h3>
							<div class="social-icons">
								<a href="#"><i class="fab fa-weibo"></i></a>
								<a href="#"><i class="fab fa-weixin"></i></a>
								<a href="#"><i class="fab fa-qq"></i></a>
								<a href="#"><i class="fab fa-facebook"></i></a>
							</div>
						</div>
					</div>
					<div class="copyright">
						<p>&copy; 2025 泉州文化旅游发展有限公司 版权所有</p>
						<p>技术支持：<a href="#">2人团队</a></p>
					</div>
				</div>
			</footer>

		</div>

		<!-- 自定义 JS -->
		<script src="js/food.js" defer></script>
	</body>
</html>